<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <base href=".">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="RippleOK query ripple transaction infomation">
  <meta name="author" content="rippleOK">
  <link rel="icon" href="/favicon.ico">

  <title>RippleOK query ripple transaction infomationl</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
  <!-- build:libcss ../assets/css/rippleok-lib.min.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:libcss ../assets/css/rippleok.min.css -->
  <!-- injector:css -->
  <link rel="stylesheet" href="../assets/css/rippleok.css">
  <!-- endinjector -->
  <!-- endbuild -->
  <!--  HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries  -->
  <!-- [if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif] -->
  <script>
    // we need tabs as spaces and not CSS magin-left
    // in order to ratain format when coping and pasing the code
    window.SINGLE_TAB = "  ";
    window.ImgCollapsed = "img/Collapsed.gif";
    window.ImgExpanded = "img/Expanded.gif";
    window.QuoteKeys = true;

    function $id(id) {
      return document.getElementById(id);
    }

    function IsArray(obj) {
      return obj &&
        typeof obj === 'object' &&
        typeof obj.length === 'number' &&
        !(obj.propertyIsEnumerable('length'));
    }

    function Process(jsonstr) {
      SetTab();
      window.IsCollapsible = true; // $id("CollapsibleView").checked;
      var json = jsonstr; //$id("RawJson").value;
      var html = "";
      try {
        if (json == "") json = "\"\"";
        //console.log(json);
        //var obj = eval("[" + json + "]");

        html = ProcessObject(json, 0, false, false, false);
        $id("jsonview").innerHTML = "<PRE class='JsonView'>" + html + "</PRE>";
      } catch (e) {
        alert("JSON is not well formated:\n" + e.message);
        $id("jsonview").innerHTML = "";
      }
    }
    window._dateObj = new Date();
    window._regexpObj = new RegExp();

    function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
      var html = "";
      var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
      var type = typeof obj;
      var clpsHtml = "";
      if (IsArray(obj)) {
        if (obj.length == 0) {
          html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
        } else {
          clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
          html += GetRow(indent, "<span class='ArrayBrace'>[</span>" + clpsHtml, isPropertyContent);
          for (var i = 0; i < obj.length; i++) {
            html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
          }
          clpsHtml = window.IsCollapsible ? "</span>" : "";
          html += GetRow(indent, clpsHtml + "<span class='ArrayBrace'>]</span>" + comma);
        }
      } else if (type == 'object') {
        if (obj == null) {
          html += FormatLiteral("null", "", comma, indent, isArray, "Null");
        } else if (obj.constructor == window._dateObj.constructor) {
          html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString() + "*/", "", comma, indent, isArray, "Date");
        } else if (obj.constructor == window._regexpObj.constructor) {
          html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
        } else {
          var numProps = 0;
          for (var prop in obj) numProps++;
          if (numProps == 0) {
            html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent);
          } else {
            clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
            html += GetRow(indent, "<span class='ObjectBrace'>{</span>" + clpsHtml, isPropertyContent);
            var j = 0;
            for (var prop in obj) {
              var quote = window.QuoteKeys ? "\"" : "";
              html += GetRow(indent + 1, "<span class='PropertyName'>" + quote + prop + quote + "</span>: " + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
            }
            clpsHtml = window.IsCollapsible ? "</span>" : "";
            html += GetRow(indent, clpsHtml + "<span class='ObjectBrace'>}</span>" + comma);
          }
        }
      } else if (type == 'number') {
        html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
      } else if (type == 'boolean') {
        html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
      } else if (type == 'function') {
        if (obj.constructor == window._regexpObj.constructor) {
          html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
        } else {
          obj = FormatFunction(indent, obj);
          html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
        }
      } else if (type == 'undefined') {
        html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
      } else {
        html += FormatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "String");
      }
      return html;
    }

    function FormatLiteral(literal, quote, comma, indent, isArray, style) {
      if (typeof literal == 'string')
        literal = literal.split("<").join("&lt;").split(">").join("&gt;");
      var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
      if (isArray) str = GetRow(indent, str);
      return str;
    }

    function FormatFunction(indent, obj) {
      var tabs = "";
      for (var i = 0; i < indent; i++) tabs += window.TAB;
      var funcStrArray = obj.toString().split("\n");
      var str = "";
      for (var i = 0; i < funcStrArray.length; i++) {
        str += ((i == 0) ? "" : tabs) + funcStrArray[i] + "\n";
      }
      return str;
    }

    function GetRow(indent, data, isPropertyContent) {
      var tabs = "";
      for (var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
      if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n")
        data = data + "\n";
      return tabs + data;
    }



    function MakeContentVisible(element, visible) {
      var img = element.previousSibling.firstChild;
      if (!!img.tagName && img.tagName.toLowerCase() == "img") {
        element.style.display = visible ? 'inline' : 'none';
        element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;
      }
    }

    function TraverseChildren(element, func, depth) {
      for (var i = 0; i < element.childNodes.length; i++) {
        TraverseChildren(element.childNodes[i], func, depth + 1);
      }
      func(element, depth);
    }

    function ExpImgClicked(img) {
      var container = img.parentNode.nextSibling;
      if (!container) return;
      var disp = "none";
      var src = window.ImgCollapsed;
      if (container.style.display == "none") {
        disp = "inline";
        src = window.ImgExpanded;
      }
      container.style.display = disp;
      img.src = src;
    }

    function CollapseLevel(level) {
      EnsureIsPopulated();
      TraverseChildren($id("jsonview"), function(element, depth) {
        if (element.className == 'collapsible') {
          if (depth >= level) {
            MakeContentVisible(element, false);
          } else {
            MakeContentVisible(element, true);
          }
        }
      }, 0);
    }

    function TabSizeChanged() {
      Process();
    }

    function SetTab() {
      //var select = $id("TabSize");
      window.TAB = MultiplyString(2, window.SINGLE_TAB);; //MultiplyString(parseInt(select.options[select.selectedIndex].value), window.SINGLE_TAB);
    }

    function EnsureIsPopulated() {
      if (!$id("jsonview").innerHTML) Process();
    }

    function MultiplyString(num, str) {
      var sb = [];
      for (var i = 0; i < num; i++) {
        sb.push(str);
      }
      return sb.join("");
    }

    function SelectAllClicked() {

      if (!!document.selection && !!document.selection.empty) {
        document.selection.empty();
      } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.removeAllRanges) {
          window.getSelection().removeAllRanges();
        }
      }

      var range =
        (!!document.body && !!document.body.createTextRange) ? document.body.createTextRange() : document.createRange();

      if (!!range.selectNode)
        range.selectNode($id("jsonview"));
      else if (range.moveToElementText)
        range.moveToElementText($id("jsonview"));

      if (!!range.select)
        range.select($id("jsonview"));
      else
        window.getSelection().addRange(range);
    }
  </script>
  <style>
    * {
      font-family: Georgia;
    }

    .jsonview {
      font: 10pt Georgia;
      background-color: #ECECEC;
      color: #000000;
      border: solid 0px #CECECE;
    }

    .ObjectBrace {
      color: #00AA00;
      font-weight: bold;
    }

    .ArrayBrace {
      color: #0033FF;
      font-weight: bold;
    }

    .PropertyName {
      color: #CC0000;
      font-weight: bold;
    }

    .String {
      color: #007777;
    }

    .Number {
      color: #AA00AA;
    }

    .Boolean {
      color: #0000FF;
    }

    .Function {
      color: #AA6633;
      text-decoration: italic;
    }

    .Null {
      color: #0000FF;
    }

    .Comma {
      color: #000000;
      font-weight: bold;
    }

    PRE.JsonView {
      background-color: white;
      margin-top: -0.5px;
      margin-bottom: 0px;
      border-top: none;
    }

    PRE.JsonView img {
      cursor: pointer;
      border: none;
      margin-bottom: -1px;
    }

    #CollapsibleViewDetail a {
      padding-left: 10px;
    }

    #ControlsRow {
      white-space: nowrap;
      font: 11px Georgia;
    }

    #TabSizeHolder {
      padding-left: 10px;
      padding-right: 10px;
    }

    #HeaderTitle {
      text-align: right;
      font-size: 11px;
    }

    #HeaderSubTitle {
      margin-bottom: 2px;
      margin-top: 0px
    }

    #RawJson {
      width: 99%;
      height: 130px;
    }

    A.OtherToolsLink {
      color: #555;
      text-decoration: none;
    }

    A.OtherToolsLink:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body ng-app="transactionApp">
  <div class="container" ng-controller="TransactionCtrl" ng-cloak>
    <div class="navbar navbar-default navbar-static-top" ng-cloak>
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand">
            <a href="/" target="_self">
              <span style="font-weight:bold;color:#428bca;">ripple<font style="font-weight:bold;color:#FF9933;">OK</font></span>
            </a>
          </div>
        </div>
        <div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">
            <li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
              <a ng-href="{{item.link}}">{{item.title}}</a>
            </li>
            <li ng-show="isAdmin()" ng-class="{active: isActive('/admin')}">
              <a href="/admin">Admin</a>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li ng-cloak>
              <a href="ledger.html" target="_blank">{{lang==0?'Ledger':'总账'}}</a>
            </li>
            <li ng-cloak class="active">
              <a href="transaction.html"  class="bold">{{lang==0?'Transaction':'交易'}}</a>
            </li>
            <li ng-cloak>
              <a href="account.html" target="_blank">{{lang==0?'Account':'账号'}}</a>
            </li>
            <li ng-cloak>
              <a href="gateway.html" target="_blank">{{lang==0?'Gateway':'网关'}}</a>
            </li>
          </ul>
          <form class="nav navbar-nav navbar-right navbar-form">
            <div class="input-group" style="width:720px">
              <input id="address" type="text" class="form-control" placeholder="Transaction Hash" ng-trim="true" ng-model="TXid"  ng-keypress="($event.which === 13)?clickGetTX(TXid):0">
              <span class="input-group-btn" style="width:150px">
              <button class="btn btn-primary" type="button"  ng-click="clickGetTX(TXid)">Let's go. ripple
                <span style="font-weight:bold;color:#FF9933;">OK</span> »</button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>


    <!-- ----------------------------------------------------------------- -->
    <ul class="nav nav-tabs" role="tablist" id="myTab">
      <li role="presentation" class="active">
        <a href="javascript:void" onClick="$('.tab-pane').hide();$('#jsonview').show()" role="tab" data-toggle="tab">JSON view</a>
      </li>
      <li role="presentation">
        <a href="javascript:void" onClick="$('.tab-pane').hide();$('#jsonraw').show()" role="tab" data-toggle="tab">JSON raw</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane" id="jsonview">...</div>
      <div role="tabpanel" class="tab-pane" id="jsonraw">
        <pre class="JsonView">{{transactioninfo}}</pre>
      </div>
      <div id="dataLoading" class="bold" align="center" style="display:none">
        <img src="img/ripplelogo.png" class="loading">Loading transaction data...
      </div>
    </div>
    <footer ng-include="'../components/footer/footer.html'"></footer>
  </div>
  <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-61799066-1', 'auto');
    ga('send', 'pageview');

  </script>
  <!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.map"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
  <![endif]-->

  <!-- build:libjs ../assets/js/rippleok-lib.min.js -->
  <!-- bower:js -->
  <script src="../bower_components/jquery/dist/jquery.js"></script>
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/lodash/dist/lodash.compat.js"></script>
  <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="../bower_components/ripple/ripple.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js({.tmp,client}/ledger) js/transaction.min.js -->
  <!-- injector:js -->
  <script src="../assets/js/ripple-remote.js"></script>
  <script src="../assets/js/rippleok-util.js"></script>
  <script src="transaction/js/app.js"></script>
  <script src="transaction/js/filter.js"></script>
  <script src="transaction/js/tx.controller.js"></script>
  <!-- endinjector -->
  <!-- endbuild -->

</body>

</html>
